<template>
  <div>
    <xgg
      v-for="(item, index) in list"
      :key="index"
      :imgurl="item.dogImgUrl"
      :dogname="item.dogName"
      :index="index"
      @tiedan="tiedan"
    ></xgg>
    <p>你选择的狗如下</p>
    <ul>
    </ul>
  </div>
</template>

<script>
import Xgg from './components/02-xz.vue'
export default {
  data() {
    return {
      list: [
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '萨摩耶',
        },
      ],
    }
  },
  components: {
    Xgg: Xgg,
  },
  methods: {
    tiedan(index) {
      const ul =document.querySelector('ul')
      const lis = document.createElement('li')
      lis.innerHTML = this.list[index].dogName
      ul.appendChild(lis)
    },
  },
}
</script>

<style></style>
